iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

JavaScript101與人生幹話系列 第 8

JavaScript101與人生幹話-變數的原始型別-物件1

  • 分享至 

  • xImage
  •  

在JS中陣列與物件都屬於同一種原始型別物件

陣列是什麼?能吃嗎?

陣列是一種能存放多個資料的一種寫法,可以儲存多種資料,而且不用一值宣告變數。

舉個例子,水果店的水果種類如果用一般宣變數的情況下宣告很多變數才能把水果種類給列舉完。

let fruit1 ='apple';
let fruit2 ='piapple';
let fruit3 ='watermelon';
let fruit4 ='raspberry';

使用陣列的情況

let fruits =['apple','piapple','watermelon','raspberry',]

是不是比較好一些了呢?

陣列內不只可以存放字串,也可以放數字、布林、陣列、物件....

也可以是空陣列

let data = ['string',0,['data1','data2'],{name:'Joy'},true];

let data1 = [];

那我要怎麼讀取陣列呢??

這裡先說明一下,在Javascript裡的數字大多數都是從0開始。

我們先讀取上述水果店的第1個水果

let fruits =['apple','piapple','watermelon','raspberry',]

console.log(fruits[0])//'apple'

你沒看錯第'一'個水果是從0開始算。

提取第二個水果就是fruits[1],就是這照樣子只要知道位置就可以提取陣列所要的內容。

那我要怎麼讀取陣列並宣告取出的內容為變數??

步驟1,要先有一個陣列
步驟2,宣告一個變數,並且賦值讀取陣列

寫這兩步驟最好是看得懂啦

一樣取的水果店為例子

let fruits =['apple','piapple','watermelon','raspberry',];

let buyFruit = fruits[1];

console.log(buyFruit)//'piapple'

上面的例子是不是步驟1-2一樣呢?

那我要怎麼知道陣列的長度??

先說陣列的長度,不是現實生活中的長度單位喔,而是陣列裡面有多少筆資料,而且用逗號隔開就算一筆,不管這一筆資要到底有多少東西,就像選舉投票的時候跟郭台銘一樣只有一票人生中少數與郭台銘一樣的時刻

arrya.length 就可以得到陣列長度了

let data = ['string',0,['data1','data2'],{name:'Joy',
                                          home:'Taipei',
                                          country:'Taiwan',
                                          familyNum:88,
                                          catNum:5},true];
let dataLeng = data.length;
console.log(dataLeng)//5

不要被object給嚇到,裡面寫得再多東西也只算一筆

那我要怎麼寫入資料到陣列中呢??

再把水果店搬出來,今天水果店要加入一個新的品項請問要怎麼加入呢?
新增水果店第五種水果

let fruits =['apple','piapple','watermelon','raspberry'];

fruits[4] = 'lemon'

console.log(fruits);

與讀取一樣選擇第'五'個, 節下來是賦值。

那如果我的fruits[]寫成fruits[0]呢?

let fruits =['apple','piapple','watermelon','raspberry'];
fruits[0] = 'lemon'

console.log(fruits);//['lemon','piapple','watermelon','raspberry']

原本第一個位置的apple會去取代成lemon喔

那如果我不按照順序呢?我硬要把lemon加入第7個!!

OK喔沒有問題。

let fruits =['apple','piapple','watermelon','raspberry'];

fruits[6] = 'lemon'

console.log(fruits);//['apple','piapple','watermelon','raspberry',empty x 2 ,'lemon']

因為把'lemon'加入第七個,原來陣列有4筆資料,要加到第7個,只好拿它東西補滿第五個與六個。

"那個東西"就會顯示為empty,型別屬於undefined

而且資料長度也會算進去喔

let fruits =['apple','piapple','watermelon','raspberry'];

fruits[6] = 'lemon';

console.log(fruits[4])//undefined

console.log(fruits.length)//7

那還有其他寫入陣列的方法嗎??

一直使用array[index] = 寫入的內容 這樣也不是辦法,畢竟如果陣列太長很容易算錯,我就懶要怎麼辦??

科技始終來自於人性 惰性

於是有了array.push(寫入的內容)與array.ushift(寫入的內容)

1.push


let fruits =['apple','piapple','watermelon','raspberry'];

fruits.push('lemon');

console.log(fruits)//['apple','piapple','watermelon','raspberry','lemon']

看到了嗎,'lemon'被加到陣列的最後面啦

2.unshift


let fruits =['apple','piapple','watermelon','raspberry'];

fruits.nushift('lemon');

console.log(fruits)//['lemon','apple','piapple','watermelon','raspberry']

與push不同的是unshift是將資料加到第一個。

那有寫入陣列的方法應該也有刪除的方法吧??

沒錯,接下來就是要刪除陣列裡的資料。

刪除的語法有pop、ushift、splice

1.pop

刪除陣列最後一個資料


let fruits =['apple','piapple','watermelon','raspberry'];

fruits.pop();

console.log(fruits)//['lemon','apple','piapple','watermelon']

原陣列內最後的內容'raspberry'被刪掉啦

2.unshift

刪除陣列第一個資料


let fruits =['apple','piapple','watermelon','raspberry'];

fruits.pop();

console.log(fruits)//[piapple','watermelon','raspberry']

原陣列內第一個的內容'apple'被刪掉啦

3.splice

刪除所選的資料範圍
array.splice(從第幾個開始刪,要刪幾個)

我打算刪掉第'二'個'的piapple'與下一個的'watermelon'

let fruits =['apple','piapple','watermelon','raspberry'];

fruits.splice(1,2);

console.log(fruits)//['apple','raspberry']

fruits.splice(1,2)翻成白話就是從fruits這個陣列的第二個資料開始刪,一次刪兩個。也就是第二號資料與第三號資料被刪掉了

以上就是物件型別當中的陣列介紹

人生幹話-老子不幹啦

由於不想在經歷各種腦殘有趣的事情與主管找碴式的約談決定幹滿一年閃人,離職後在家裡幫忙了快兩年後出來再找工作因為我沒錢了,這次的生技業,沒錯又是生技業,我就是這麼頭鐵,本來以為換一家公司會好一些沒想到是一樣是噩夢,這家公司是北部的生技公司,主打是透過抗體與某原料結合(這個不方便說是什麼材料,說了馬上就知道了,我就怕),配合自己研發的機台可以檢測極低濃度的檢體,但是實際的檢體準確率只有55%-60%,基本上跟用猜的是一樣的,總之空白了兩年這次的薪水只有28K實領26990,為甚麼我會對這個薪水這個清晰呢?因為這個薪水四年都沒有改變,只有白癡才會以這種薪水在這家公司待四年,那個白癡就是我,被老闆餵了上市上櫃可以分紅之類的大餅,會被國外大藥廠收購之類的balabalabala的。


上一篇
JavaScript101與人生幹話-變數的原始型別-數字 與 賦值運算子
下一篇
JavaScript101與人生幹話-變數的原始型別-物件2
系列文
JavaScript101與人生幹話30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言